window.onload=function(){
    var titleList=document.getElementByIdClassName('title');
    var contentList=document.getElementsByClassName('content');

    for(let i = 0; i<titleList.length; i++){
        titleList[i].onclick=function(){
            //为第i个标题绑定点击事件
            //当 第i个标题被点击后，要做些什么
            //只要显示i个内容，只为i个标题加边框
            contentList[i].classList.add('active');
            titleList[i].classList.add('active');

            for(let j=0;j<contentList.length;j++){
                if(j !=i)
                contentList[j].classList.remove('active');
                titleList[j].classList.remove('active');
            }
        }
    }
}

var btnAdd=document.getElementById('sdd');
btnAdd.onclick=function(){
    let li =document.createElement('li');
    let text = document.createTextNode('标题四');
    li.appendChild(text);
    let clazz=document.createAttribute('class');
    clazz.value='title';
    li.setAttributeNode(clazz);
    let ul =document.getElementsByClassName('titles')[0];
    ul.appendChild(li);

    initEvent();
}